<template>
  <u-dialog :title="title" :show.sync="show" :auto-close="false" @cancel="cancel" @confirm="confirm" width="1080px">
    <el-form ref="dataForm" :rules="rules" :model="dataForm" label-width="120px">

      <el-tabs v-model="active">
        <el-tab-pane label="基础信息" name="first">

          <el-descriptions title="员工信息" :column="2" border >
            <el-descriptions-item label="工号" v-if="dataForm.type === 1">
              {{ dataForm.jobNo }}
            </el-descriptions-item>
            <el-descriptions-item label="头像">
              <el-image style="width: 80px; height: 80px;" :src="dataForm.avatar" :preview-src-list="handleThumbs(dataForm.avatar)" />
            </el-descriptions-item>
            <el-descriptions-item label="姓名">
              {{ dataForm.name }}
            </el-descriptions-item>
            <el-descriptions-item label="民族">
              {{ dataForm.nationality }}
            </el-descriptions-item>
            <el-descriptions-item label="手机">
              {{ dataForm.mobile }}
            </el-descriptions-item>
            <el-descriptions-item label="籍贯">
              {{ dataForm.bornPlace }}
            </el-descriptions-item>
            <el-descriptions-item label="生日">
              {{ dataForm.birthday }}
            </el-descriptions-item>

            <el-descriptions-item label="身份证">
              {{ dataForm.idCard }}
            </el-descriptions-item>

            <el-descriptions-item label="性别">
              {{ dataForm.sex }}
            </el-descriptions-item>

            <el-descriptions-item label="身份证有效期">
              {{ dataForm.idCardValidity }}
            </el-descriptions-item>
            <el-descriptions-item label="年龄">
              {{ dataForm.age }}
            </el-descriptions-item>

            <el-descriptions-item label="户籍地址">
              {{ dataForm.bornAddress }}
            </el-descriptions-item>

            <el-descriptions-item label="邮箱">
              {{ dataForm.email }}
            </el-descriptions-item>

            <el-descriptions-item label="最高学历">
              {{ dataForm.highestDegree }}
            </el-descriptions-item>
            <el-descriptions-item label="入职时间" v-if="dataForm.type === 1">
              {{ dataForm.createTime }}
            </el-descriptions-item>
            <el-descriptions-item label="现住地址">
              {{ dataForm.province }}{{ dataForm.city }}{{ dataForm.area }}{{ dataForm.address }}
            </el-descriptions-item>
            <el-descriptions-item label="餐费">
              {{ dataForm.mealCost }}元
            </el-descriptions-item>
            <el-descriptions-item label="离职时间" v-if="dataForm.type === 1">
              {{ dataForm.endTime }}
            </el-descriptions-item>
            <el-descriptions-item label="离职事由" v-if="dataForm.type === 1">
              {{ dataForm.endContent }}
            </el-descriptions-item>
          </el-descriptions>

          <el-descriptions title="紧急联络" :column="2" border style="margin-top: 20px" >
            <el-descriptions-item label="与本人关系">
              {{ dataForm.emergencyContactRelation }}
            </el-descriptions-item>
            <el-descriptions-item label="联络人">
              {{ dataForm.emergencyName }}
            </el-descriptions-item>
            <el-descriptions-item label="联络电话">
              {{ dataForm.emergencyMobile }}
            </el-descriptions-item>
          </el-descriptions>

          <el-descriptions title="公司信息" :column="2" border style="margin-top: 20px" >
            <el-descriptions-item label="公司名称">
              {{ dataForm.enterpriseName }}
            </el-descriptions-item>
            <el-descriptions-item label="公司编码">
              {{ dataForm.enterpriseNo }}
            </el-descriptions-item>
            <el-descriptions-item label="合同编号">
              {{ dataForm.contractNo }}
            </el-descriptions-item>
          </el-descriptions>

          <el-descriptions title="商户信息" :column="2" border style="margin-top: 20px" >
            <el-descriptions-item label="商户名称">
              {{ dataForm.merchantName }}
            </el-descriptions-item>
            <el-descriptions-item label="商户编码">
              {{ dataForm.merchantNo }}
            </el-descriptions-item>
            <el-descriptions-item label="商户楼层">
              {{ dataForm.floor }}
            </el-descriptions-item>
          </el-descriptions>

          <el-descriptions title="审批信息" :column="1" border style="margin-top: 20px" >
            <el-descriptions-item label="审批类型">
                <el-tag>{{ dataForm.type === 0? '入职申请单': data.type === 1 ? '离职申请单' : '转正申请单' }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="审批结果">
              <el-radio-group v-model="dataForm.result">
                <el-radio label="agree">同意</el-radio>
                <el-radio label="refuse">拒绝</el-radio>
              </el-radio-group>
            </el-descriptions-item>
            <el-descriptions-item label="审批备注">
              <el-input v-model="dataForm.remark" type="textarea" placeholder="备注信息" clearable maxlength="200" show-word-limit />
            </el-descriptions-item>
          </el-descriptions>

        </el-tab-pane>

        <el-tab-pane label="证件信息" name="fourth">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="身份证正面">
              <el-image style="width: 200px; height: 200px;" :src="dataForm.idCardFront" :preview-src-list="handleThumbs(dataForm.idCardFront)" />
            </el-descriptions-item>
            <el-descriptions-item label="身份证反面">
              <el-image style="width: 200px; height: 200px;" :src="dataForm.idCardBack" :preview-src-list="handleThumbs(dataForm.idCardBack)" />
            </el-descriptions-item>
            <el-descriptions-item label="身份证有效期">
              {{dataForm.idCardValidity}}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>

        <el-tab-pane label="健康信息" name="fourth3">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="健康证正面">
              <el-image style="width: 200px; height: 200px;" :src="dataForm.healthCertificateFront" :preview-src-list="handleThumbs(dataForm.healthCertificateFront)" />
            </el-descriptions-item>
            <el-descriptions-item label="健康证反面">
              <el-image style="width: 200px; height: 200px;" :src="dataForm.healthCertificateBack" :preview-src-list="handleThumbs(dataForm.healthCertificateBack)" />
            </el-descriptions-item>
            <el-descriptions-item label="健康证有效期">
              {{dataForm.healthCertificateValidity}}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>

        <el-tab-pane label="入职附件" name="fourth4">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="入职函">
              <el-image style="width: 200px; height: 200px;" :src="dataForm.createFile" :preview-src-list="handleThumbs(dataForm.createFile)" />
            </el-descriptions-item>
            <el-descriptions-item label="押金条" v-if="dataForm.type === 1">
              <el-image style="width: 200px; height: 200px;" :src="dataForm.depositFile" :preview-src-list="handleThumbs(dataForm.depositFile)" />
            </el-descriptions-item>
            <el-descriptions-item label="物品领用单" v-if="dataForm.type === 1">
              <el-image style="width: 200px; height: 200px;" :src="dataForm.receipt" :preview-src-list="handleThumbs(dataForm.receipt)" />
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>

        <el-tab-pane label="离职附件" name="fourth5" v-if="dataForm.type === 1">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="离职函">
              <el-image style="width: 200px; height: 200px;" :src="dataForm.endFile" :preview-src-list="handleThumbs(dataForm.endFile)" />
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>

      </el-tabs>
    </el-form>
  </u-dialog>
</template>

<script>
export default {
  name: 'Approval',
  model: {
    prop: 'show',
    event: 'changeShow'
  },
  props: {
    /** 是否弹框 */
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: data => {
        return ({})
      }
    }
  },
  data() {
    return {
      api: this.$u.api.PluginsGuideApply,
      title: '申请审批',
      dataForm: {},
      rules: {
        result: [
          { required: true, message: '请审批申请单', trigger: 'change' }
        ]
      },
      active: 'first'
    }
  },
  watch: {
    show(newVal, oldVal) {
      // 监听是否弹框,决定是否初始化数据
      // console.log(newVal + '---------------' + oldVal)
      if (newVal) {
        const d = {
          result: 'agree',
          remark: ''
        }
        this.dataForm = this.$u.deepMerge(d, this.data)
        // 清除表单验证状态
        const self = this
        self.$nextTick(() => {
          self.$refs['dataForm'].clearValidate()
        })
      }
    }
  },
  methods: {
    // 确认
    confirm() {
      const self = this
      const { id, result, remark } = self.dataForm
      const d = { id, result, remark }

      self.$refs['dataForm'].validate((valid) => {
        if (valid) {
          // 效验数据格式
          self.api.approval(d).then(() => {
            // 通知信息
            self.$u.msg('审批成功')
            self.active = 'first'
            // 关闭弹窗状态
            self.$emit('changeShow', false)
            // 更新成功后传递
            self.$emit('change')
          })
        }
      })
      this.$emit('confirm')
    },
    // 关闭或者取消
    cancel() {
      this.active = 'first'
      this.$emit('changeShow', false)
      this.$emit('cancel')
    },
    handleThumbs(thumb) {
      return thumb? thumb.split(',') : []
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-descriptions__title {
    font-size: 14px;
    font-weight: bold;
  }
}
</style>

